<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>借记卡</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<section>
    <div class="card">
        <div class="face front">
            <h3 class="debit">借记卡</h3>
            <h3 class="bank">招商银行</h3>
            <img src="img/chip.png" alt="" class="chip">
            <h3 class="number">
                0123 4567 8901 2345
            </h3>
            <h5 class="valid">
                <div class="title">
                    <span>valid</span>
                    <span>thru</span>
                </div>
                <div class="date">11/23</div>
            </h5>
            <h5 class="holder">
                wang wang
            </h5>
        </div>
        <div class="face back">
            <div class="blackbar"></div>
            <div class="ccvtext">
                <h5>authorized signature-not valid unless signed</h5>
                <div class="whitebar"></div>
                <div class="ccv">123</div>
            </div>
            <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ullam culpa illum facilis odit, minus odio optio quas, qui, numquam accusamus quae nemo expedita cupiditate quasi beatae commodi animi officia iste. Numquam mollitia fuga error.
            </div>
        </div>
    </div>
</section>
</body>

</html>
